<template>
	<view v-if="copyUser.nickname">
		<!--标题栏-->
		<bar-title bgColor="bg-white" isBack>
			<block slot="content">个人资料</block>
		</bar-title>

		<!--设置列表-->
		<view class="cu-list menu sm-border margin-top">
			<view class="cu-item arrow" @tap="headimgchoose">
				<view class="content" >
					<image class="icon" src="/static/img/ic_personal_headpic.png" />
					<text class="text-black">头像</text>
				</view>
				<view class="action">
					<image class="avatar" :src="copyUser.headurl" />
				</view>
			</view>
			
			<view class="cu-item arrow" 
				@click="showModal"
				data-key='nikname'
			>
				<view class="content">
					<image class="icon" src="/static/img/ic_personal_username.png" />
					<text class="text-black">昵称</text>
				</view>
				<view class="action">
					<text class="text-gray">{{copyUser.nickname}}</text>
				</view>
			</view>
			
			<view class="cu-item arrow">
				<view class="content">
					<image class="icon" src="/static/img/ic_personal_sex.png" />
					<text class="text-black">性别</text>
				</view>
				<view class="action">
					<picker mode="selector"
						:value="copyUser.sex" 
						:range="sexArr"
						:range-key="'title'"
						@change="sexChange($event)"
					>
						<view class="picker text-gray">
							{{sexArr[copyUser.sex].title}}
						</view>
					</picker>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class="content">
					<image class="icon" src="/static/img/ic_personal_birthday.png" />
					<text class="text-black">生日</text>
				</view>
				<view class="action">
					<picker mode="date" :value="copyUser.birthday" 
						start="1920-01-01"
						@change="datePickerChange">
						<view class="picker text-gray">
							{{copyUser.birthday}}
						</view>
					</picker>
				</view>
			</view>
			
			<view class="cu-item arrow" @click="showMulLinkageThreePicker">
				<view class="content">
					<image class="icon" src="/static/img/ic_personal_add.png" />
					<text class="text-black">地区</text>
				</view>
				<view class="action" >
					<text class="text-gray">{{copyUser.addressText}}</text>
				</view>
			</view>
		</view>


		<view class="cu-list menu sm-border margin-top">
			<view class="cu-item arrow">
				<view class="content">
					<image class="icon" src="/static/img/ic_personal_job.png" />
					<text class="text-black">职业</text>
				</view>
				<view class="action">
					<text class="text-gray">{{copyUser.job}}</text>
				</view>
			</view>
			<!-- <view class="cu-item arrow">
				<view class="content">
					<image class="icon" src="/static/img/ic_personal_nature.png" />
					<text class="text-black">性格</text>
				</view>
				<view class="action">
					<text class="text-gray"></text>
				</view>
			</view>
			
			<view class="cu-item arrow">
				<view class="content">
					<image class="icon" src="/static/img/ic_personal_hobby.png" />
					<text class="text-black">爱好</text>
				</view>
				<view class="action">
					<text class="text-gray">请填写</text>
				</view>
			</view> -->
		</view>
		

		<view class="cu-list menu sm-border margin-top">
			<view class="cu-item arrow" >
				<view class="content">
					<image class="icon" src="/static/img/ic_personal_motto.png" />
					<text class="text-black">签名</text>
				</view>
				<view class="action">
					<text class="text-gray">{{copyUser.autograph}}</text>
				</view>
			</view>
		</view>		
		
		
		<!-- 弹出层 -->
		<view class="cu-modal bottom-modal" 
			:class="modalName=='modifyModal'?'show':''">
			<view class="cu-dialog " 
				v-if="modalName=='modifyModal'" 
				:style="'height:'+windowHeight+'px'"
			>
				<view class="cu-bar no-shadow solid-bottom bg-white">
					<view class="action" style="margin: 0;"
						@click="hideModal" 
					>
						<text class="cuIcon-back"></text>
					</view>
					<view class="content">{{ modelSchema[modelKey].title }}</view>
				</view>
				
				<view class="cu-list card-menu margin-top text-left">
					<view class="cu-form-group radius">
						<textarea 
							:maxlength="modelSchema[modelKey].maxlength"
							:disabled="false" 
							@blur="bindTextAreaBlur" 
							:placeholder="modelSchema[modelKey].placehold" 
							:value="textareaAValue"
						></textarea>
					</view>
				</view>
				
				<view class="padding margin-top-xl">
					<button class="cu-btn bg-cyan radius lg block"
						@click="onChangeCopy"
					>提交</button>
				</view>
			</view>
		</view>
		
		<mpvue-city-picker  ref="mpvueCityPicker"
			themeColor="#1cbbb4"
			@onConfirm="addressChange"
		></mpvue-city-picker>
		<cropper @upload="myUpload" quality="1" ref="avatar"></cropper>
	</view>
</template>

<script>
var cos = require('@/common/cos');
import { mapState } from 'vuex';
import cropper from "@/components/cropper.vue";
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
import { User } from '@/models/user.js';
let user = new User()
export default {
	components: {
		cropper,
		mpvueCityPicker
	},
	computed: {
		...mapState({
			"userInfo": state => state.userInfo
		}),
	},
	data() {
		return {
			modalName: '',
			windowHeight: 667,
			copyUser: {
				headurl: '',
				nickname: '',
				sex: 0,
				birthday: '1920-01-01',
				addressText: '',
				job: '',
				autograph: ''
			},
			sexArr: [{
				"sex": 0,
				"title": "保密"		
			}, {
				"sex": 1,
				"title": "男"		
			}, {
				"sex": 2,
				"title": "女"		
			}],
			userTag: [],
			modelKey: '',
			modelSchema: {
				nikname: {
					title: '昵称',
					placehold:'输入你的昵称(最多不超过10个字符)',
					maxlength: 10
				},
				signature: {
					title: '签名',
					placehold:'输入你的签名(最多不超过30个字符)',
					maxlength: 30
				}
			},
			textareaAValue: '',
			nowTime: '',
			
		}
	},
	onLoad() {
		this.windowHeight = this.systemInfo.windowHeight
		this.initUserInfo()
		user.getUserTag().then(allTag => {
			this.userTag = allTag
		})
			
	},
	// 监听页面返回
	onBackPress() {
		console.log('监听页面返回');
	},
	methods: {
		initUserInfo() {
			let userInfo = this.userInfo
			if(userInfo && userInfo.nickname) {
				this.copyUser.addressText = userInfo.province+userInfo.city+userInfo.district
				this.copyUser.birthday = userInfo.birthday
				this.copyUser.sexIndex = userInfo.sex-0 
				this.copyUser.autograph = userInfo.autograph
				this.copyUser.job = userInfo.job
				this.copyUser.headurl = userInfo.headurl
				this.copyUser.nickname = userInfo.nickname
			}
		},
		onChangeCopy(){
			var nowTime = new Date();
			if (nowTime - this.lastTime < 2000) {
				console.log('阻断')
				return;
			}
			this.lastTime = nowTime
			var params = {};
			params[this.modelKey] = this.textareaAValue;
			let checkRes = this.$graceChecker.check(
				params, 
				this.$formRuleConfig[this.modelKey]
			);
			if (!checkRes) {
				uni.showToast({
					title: this.$graceChecker.error,
					icon: 'none'
				});
				return;
			}
		},
		headimgchoose() {
			// this.$refs.avatar.fChooseImg(0,{
			// 	selWidth: '350upx', selHeight: '350upx', 
			// 	expWidth: '260upx', expHeight: '260upx',
			// 	inner:'true'
			// });
		},
		
		showMulLinkageThreePicker() {
			this.$refs.mpvueCityPicker.show()
		},
		addressChange(e) {
			let cityArr =  e.label.split('-')
			user.changeUserInfo({
				province: cityArr[0],
				city: cityArr[1],
				district: cityArr[2],
			}).then(res => {
				this.addressText = cityArr.join('')
				uni.showToast({
					title: "地区修改成功"
				})
			})
		},
		myUpload(rsp) {
			console.log(rsp);
			// cos.putPath(rsp, url => {
			// 	this.updataUser('shopimg', url)
			// })
		},
		sexChange(e){
			let sex =  e.target.value
			user.changeUserInfo({sex}).then(res => {
				this.sexIndex = sex
				uni.showToast({
					title: "性别修改成功"
				})
			})
		},
		datePickerChange(e) {
			let birthday = e.detail.value;
			user.changeUserInfo({birthday}).then(res => {
				this.birthday = birthday
				uni.showToast({
					title: "生日修改成功"
				})
			})
		},
		changeTag() {},
		showModal(e) {
			// this.modalName = 'modifyModal'
			this.modelKey = e.currentTarget.dataset.key
		},
		hideModal(e) {
			this.modalName = null
		},
		bindTextAreaBlur(e) {
			this.textareaAValue = e.detail.value;
			console.log(e.detail.value);
		},
	}
}
</script>

<style lang="scss" scoped>
.cu-list.menu>.cu-item {
	.content {
		display: flex;
		align-items: center;
		
		.icon{
			width: 30rpx;
			height: 30rpx;
			margin-right: 20rpx;
		}
	}
	.avatar{
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
	}
}
/* 弹出层形式的广告 */
.uni-banner {
	width: 70%;
	position: fixed;
	left: 15%;
	margin-top: -200upx;
	z-index: 99;
	/* padding: 10px; */
	border-radius: 20upx;
	background-color: #E8F4D9;
}

.mask-model {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 11;
	background: rgba(0, 0, 0, 0.6);

}

.title {
	text-align: center;
	padding: 35rpx;
	font-size: 18px;
	;
}

.uni-banner input {
	width: 90%;
	margin: auto;
	border-radius: 10upx;
	height: 32px;
	padding: 0 10px;
	font-size: 16px;
}

.save {
	margin-top: 40upx;
	border-top: 1px solid #EEEEEE;
	text-align: center;
	padding: 25rpx;
	font-size: 18px;
}
</style>
